<template>
  <n-list style=" min-height: 410px;">
    <n-list-item v-for="item in listData" :key="item.user_id" style="padding: 15px 0 12.5px;">
      <template #prefix>
        <n-avatar round :size="48" :src="item.avatar" />
      </template>
      <n-thing :title="item.username">
        <template #description>
          <div class="flex justify-between items-center w-full pb-2.9">
            <n-text depth="3" class="w-2/6">{{ item.member_card }}--{{ item.mobile }}</n-text>
            <div class="flex items-center w-3/6">
              <n-progress
                type="line"
                :percentage="item.bili"
                :indicator-placement="'inside'"
                processing
              />
            </div>
            <n-text depth="2" class="w-1/6" style="text-align: right;">￥{{ item.zmoney }}</n-text>
          </div>
        </template>
      </n-thing>
    </n-list-item>
  </n-list>
</template>

<script lang="ts" setup>
  import { ref,onMounted } from 'vue';
  import { paypaihang } from '@/api/tongji/index';

  const listData = ref([
    {
      user_id: '',
      avatar: '',
      username: '',
      member_card: '',
      mobile: '',
      bili: '',
      zmoney: '',
    },
  ]);

  onMounted(async () => {
    listData.value = [];
    const res1 = await paypaihang({ });
    listData.value = res1
  });

</script>
